import React, { useEffect, useRef,useState } from 'react';

//必须未大写字母开头
export const RefTime: React.FC = () => {
    const [count, setCount] = useState(0);

    // useRef()只是在组件首次渲染的时候被创建
    // 如果组件时rerender的时候,不会重复创建ref对象;
    const oldValue = useRef(Date.now()); 
    
    // 自增
    const addFun = () => {
        setCount((pre) => pre + 1);
    }
    // 更新 ref.current 值得时候页面不会重新render,所以 页面实际展示得值 不会导致组件得重新渲染；
    const upTime = ()=>{
        oldValue.current = Date.now();
        console.log("当前时间",oldValue.current);
    }

    console.log("更新了页面")
    // useEffect 这个hook默认 会在页面初始化得时候加载一次，其他渲染时根据函数中得第二个参数 数组中得某个依赖决定得；
    // useEffect 可以理解成一个vue中得监听方法（个人感觉）；
    // *** useRef得第二个特性就是不能作为其他hooks得依赖 ****
    useEffect(()=>{},[oldValue.current])
    return (
        <>
            <h1>新值是：{count}；时间:{oldValue.current}</h1>
            <button type='button' onClick={addFun}>自增+1</button>
            <button type='button' onClick={upTime}>更新时间</button>
        </>
    )
}


